import { observer } from 'mobx-react-lite';
import Navbar from '@/components/Navbar';
import HouseImageList from '@/components/HouseImageList';
import { Image, Text, View } from '@tarojs/components';
import PhoneImg from '@/static/images/icon/phone.png';
import ChartImg from '@/static/images/icon/chat.png';
import ButtonComp from '@/components/Button';
import ShowCollectFees from '@/components/ShowCollectFees';
import ShowHouseMessage from '@/components/ShowHouseMessage';
import leaseStore from '@/stores/LeaseStore';
import { getCurrentInstance, makePhoneCall, navigateTo } from '@tarojs/taro';
import { CommonUtil } from '@/utils/CommonUtil';
import './index.less';
import TagComp from '@/components/Tag';
import systemStore from '@/stores/SystemStore';
import collectedImg from '@/static/images/icon/collected.png';
import collectImg from '@/static/images/icon/collect.png';
import { useEffect, useMemo, useState } from 'react';
import useCollect from '@/hooks/useCollect';
import ImageComp from '@/components/Image';
import arrowImg from '@/static/images/icon/arrow-right.png';
import useChat from '@/hooks/useChat';
import chatStore from '@/stores/ChatStore';
import userStore from '@/stores/UserStore';

const TenantLookLeaseHouse = () => {
  const { currentLeaseHouse } = leaseStore;
  const { setChatReceiver } = chatStore;
  const { currentLandlord } = userStore;
  const { changeCollectStatus, getHouseCollectStatus } = useCollect();
  const { useLeaveChatSession } = useChat();
  const routerParams = getCurrentInstance().router?.params;
  // 已收藏
  const [collected, setCollected] = useState(false);
  // 房屋的维修状态（待维修为false）
  const reportStatus = useMemo(() => {
    return routerParams?.reportStatus === 'false' ? false : true;
  }, [routerParams?.reportStatus]);

  /**
   * 打电话
   */
  const phoneLandlord = () => {
    currentLeaseHouse.landlordPhone &&
      makePhoneCall({
        phoneNumber: currentLeaseHouse.landlordPhone,
      });
  };

  /**
   * 房屋报修
   */
  const toReportHouse = () => {
    // 房屋已处于维修状态
    if (!reportStatus) return;
    navigateTo({
      url: `/pages/report/index?houseId=${currentLeaseHouse.houseId}&landlordId=${currentLeaseHouse.landlordId}`,
    });
  };

  /**
   * 获取当前房屋的收藏状态
   */
  const getCurrentHouseCollectStatus = async () => {
    if (currentLeaseHouse?.houseId) {
      const status: number | null = await getHouseCollectStatus(
        currentLeaseHouse.houseId
      );
      status && setCollected(Boolean(status));
    }
  };

  /**
   * 去改变房屋的收藏状态
   */
  const toChangeHouseCollectStatus = async () => {
    // 改变房屋的收藏状态
    await changeCollectStatus(
      currentLeaseHouse.houseId,
      currentLeaseHouse.landlordId,
      Number(!collected)
    );
    setCollected(!collected);
  };

  useLeaveChatSession();
  useEffect(() => {
    getCurrentHouseCollectStatus();
  }, []);

  const lookHouseComment = () => {
    navigateTo({
      url: `/pages/houseAllComment/index?houseName=${currentLeaseHouse.houseName}&houseId=${currentLeaseHouse.houseId}`,
    });
  };

  const toChat = () => {
    setChatReceiver(currentLandlord);
    navigateTo({
      url: `/pages/chatMessage/index`,
    });
  };

  return (
    <Navbar
      mode='back'
      bgColor='var(--mini-third)'
      title={currentLeaseHouse.houseName}
    >
      <View
        className='tenant-look-lease-house-container'
        style={{ height: systemStore.haveNavbarNotTabbarHeight }}
      >
        <HouseImageList
          imgList={JSON.parse(currentLeaseHouse.houseImg || '[]')}
        />
        <View className='contact-landlord-wrap'>
          <View className='landlord-info'>
            <View className='flex items-center'>
              <ImageComp
                src={currentLeaseHouse.landlordImg}
                className='landlord-head-img'
              />
              <Text className='landlord-text'>
                {currentLeaseHouse.landlordName}
              </Text>
            </View>
            <View>
              <Image
                src={collected ? collectedImg : collectImg}
                className='icon'
                mode='heightFix'
                style={{ marginRight: '24px' }}
                onClick={toChangeHouseCollectStatus}
              />
              <Image
                src={PhoneImg}
                className='icon'
                mode='heightFix'
                onClick={phoneLandlord}
                style={{ marginRight: '20px' }}
              />
              <Image
                src={ChartImg}
                className='icon'
                mode='heightFix'
                style={{ width: '37px' }}
                onClick={() => toChat()}
              />
            </View>
          </View>
          <View className='comment-enter' onClick={lookHouseComment}>
            <Text>查看房屋评论</Text>
            <Image src={arrowImg} className='arrow-icon' />
          </View>
          <View className='time-wrap'>
            <View className='move-into-time'>
              <Text>入住时间</Text>
              <Text>
                {CommonUtil.formatUtcTime(currentLeaseHouse.createdAt)}
              </Text>
            </View>
            <View className='already-time'>
              <Text>已入住</Text>
              <View className='flex items-center'>
                <TagComp
                  content={CommonUtil.getDayNum(currentLeaseHouse.createdAt)}
                  bgColor='var(--mini-first)'
                />
                <Text>天</Text>
              </View>
            </View>
          </View>
          <ButtonComp
            title={reportStatus ? '房间报修' : '已报修'}
            className='maintenance-btn'
            bgColor={reportStatus ? 'var(--mini-third)' : 'var(--bg-fourth)'}
            onClick={toReportHouse}
          />
        </View>
        <ShowCollectFees houses={currentLeaseHouse} />
        <ShowHouseMessage houses={currentLeaseHouse} />
      </View>
    </Navbar>
  );
};

export default observer(TenantLookLeaseHouse);
